
.horizontalRotation-enter-active, .horizontalRotation-leave-active {
  position: absolute;
  width: 360px;
  transition: 2s;
}

.horizontalRotation-enter-active {
  opacity: 0;
}

.horizontalRotation-leave-active {
  opacity: 1;
}

.horizontalRotation-enter-to, .horizontalRotation-leave-to {
  animation: horizontalRotation-enter 1.5s forwards;
  opacity: 1;
}

.horizontalRotation-leave-to {
  animation: horizontalRotation-leave 1.5s forwards;
  opacity: 0;
}

@keyframes horizontalRotation-enter {
  0% {
    transform: rotateY(-180deg);
  }
  60% {
    transform: rotateY(1120deg);
  }
  70% {
    transform: rotateY(1060deg);
  }
  80% {
    transform: rotateY(1100deg);
  }
  90% {
    transform: rotateY(1075deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}

@keyframes horizontalRotation-leave {
  0% {
    transform: rotateY(0deg);
  }
  60% {
    transform: rotateY(1300deg);
  }
  70% {
    transform: rotateY(1240deg);
  }
  80% {
    transform: rotateY(1280deg);
  }
  90% {
    transform: rotateY(1255deg);
  }
  100% {
    transform: rotateY(1260deg);
  }
}
